<template>
	<div class="dashboard-container">
		<div class="dc_left">
			<div class="dcl_head">
				<div class="dclh_left">
					<div class="dclhl_title">
						<span>报警统计</span>
					</div>
					<div class="dclhl_content dclhl_content_next">
						<template v-for="item in warningTotal">
							<div class="dclhlc_div">
								<span  :style="{color:item.keyword=='yellow'?'#d1d119':item.keyword}">{{item.warning_num}}</span>
								<span>{{item.name}}</span>
							</div>
						</template>
						
					
						
					</div>
				</div>
				<div class="dclh_right" >
					<div class="dclhl_title">
						<span>设备在线情况</span>
					</div>
					<div class="dclhl_content">
						<div class="status_list">
							<div class="dclhlc_div">
								<span style="color:#37F67D">{{appInfo.device_info.line}}</span>
								<span>在线</span>
							</div>
							<div class="dclhlc_div" >
								<span style="color:#FFB325">{{appInfo.device_info.off}}</span>
								<span>离线</span>
							</div>
						</div>
						
                        <div class="biffld_list">
							
                            <template v-for="(item,index) in typeCountList">
								<div class="blclass_div">
									<div class="blcd_title">
										<span>{{item.device_type_name}}</span>
									</div>
									<div class="blcd_content">
										<div class="blcdc_div">
											<span>在线</span>
											<span style="color: #37F67D;">{{item.line_num}}</span>
										</div>
										<div class="blcdc_div">
											<span>离线</span>
											<span style="color: #FFB325;">{{item.leave_num}}</span>
										</div>
										<div class="blcdc_div">
											<span>报警中</span>
											<span style="color: #D12323;">{{item.warning_num}}</span>
										</div>
									</div>
									<div class="borderxian" ></div>
								</div>
							
							</template>
                       
                           
                        </div>
					</div>
				</div>
			</div>



			<div class="dcl_body">
				<div class="dclhl_title">
					<span>设备列表</span>
				</div>
				<div class="table_content">
					<el-table  :data="list" element-loading-text="Loading" border fit highlight-current-row>
						<el-table-column  label="设备名称" width="300px">
							<template slot-scope="scope">
								{{ scope.row.name }}
							</template>
						</el-table-column>
					
						<el-table-column label="在线状态" width="200px">
							<template slot-scope="scope">
								<span v-if="scope.row.is_line" style="color: #37F67D">在线</span>
								<span v-else style="color: #FFB325;">离线</span>
					
							</template>
						</el-table-column>
						<el-table-column label="最后在线时间" width="300px">
							<template slot-scope="scope">
								<span>{{getTime(scope.row.last_line_time)}}</span>
							</template>
						</el-table-column>

						<el-table-column label="报警类型" width="200px">
							<template slot-scope="scope">
								<span v-if="scope.row.last_warning_id" :style="{color:scope.row.last_warning_type=='yellow'?'#ffd600':scope.row.last_warning_type}">{{colorList[scope.row.last_warning_type]}}报警</span>
								<span v-else>无</span>
							</template>
						</el-table-column>

						<el-table-column label="最后数据">
							<template slot-scope="scope">
								<span>{{getDataList(scope.row.last_real_value)}}</span>
							</template>
						</el-table-column>
					
			
					</el-table>
				</div>
				
			</div>

		</div>
		<div class="dc_right">
			<div class="dcr_head">
				<span>{{dateTime}}</span>
				<span>{{dateDay}} {{dateWeek}}</span>
			</div>
			<div class="dcr_content">
				<div class="dcrc_title">
					<div class="dcrct_left">
						<span>项目概况</span>
					</div>
					<el-dropdown>
						<div class="dcrct_right">
							<span>{{appInfo.name}}</span>
							<i class="el-icon-caret-bottom"></i>
						</div>
						<el-dropdown-menu slot="dropdown">
							<template v-for="item in projectList">
								<div class="app_div" @click="clickItem(item)">{{ item.name}}</div>
							
							</template>
							
						
						</el-dropdown-menu>
					</el-dropdown>
					
				</div>
				<div class="dcrc_body">
					<div class="dcrcb_div">
						<span>干滩长度</span>
						<span>{{appInfo.device_info.dry_beach_length}} m</span>
					</div>
					<div class="dcrcb_div">
						<span>干滩坡度</span>
						<span>{{appInfo.device_info.dry_beach_slope}}</span>
					</div>
					<div class="dcrcb_div">
						<span>库水位</span>
						<span>{{appInfo.device_info.ksw_elevation_h}} m</span>
					</div>
					<div class="dcrcb_div">
						<span>安全超高</span>
						<span>{{appInfo.device_info.safe_h}} m</span>
					</div>
					<!-- <div class="dcrcb_div">
						<span>GNSS</span>
						
					</div>
					<div class="dcrcb_div">
						<span>内部位移</span>
						
					</div>
					<div class="dcrcb_div">
						<span>浸润线</span>
						
					</div> -->
				</div>

			

			</div>
			<div class="dcrc_btn">
				<div class="btn_div_main" @click="toBigScreen">
					<span>查看大屏</span>
				</div>
				
			</div>
		</div>
	</div>
</template>

<script>
import { mapGetters } from 'vuex'
import homeapi from '@/api/tailings_monitoring_service_smos_api.js'
import until from '@/api/until.js'
import app from '@/store/modules/app'
export default {
	name: 'Dashboard',
	data(){
		return {
			app_id:"",
			queryParms:{
                page:1,
                page_size:99999,
                name:"",
               
            },
			warningTotal:[],
			appInfo:{},
			list:[],
			colorList:{
                'yellow':'黄色',
                'red':"红色",
                'blue':"蓝色",
                'orange':'橙色'
            },
			dateDay:'',
			dateWeek:'',
			dateTime:"",
			projectList:[],
			typeCountList:[],
		}
	},
	computed: {
		...mapGetters([
			'name'
		])
	},
	mounted(){
		this.fetchData();
		this.getTimeInfo();
		
		setInterval(()=>{
			this.getTimeInfo();
		},1000)
	},
	methods:{
		toBigScreen(){
			window.open("/pc/#/bigscreen?app_id="+this.app_id)
			
		},

		       //获取分类统计
		async getDeviceCount(){
            let app_id=this.app_id
            let data=await homeapi.Smos_apiAppDevice_countGet({app_id});
            if(data.error_code==0){
                this.typeCountList=data.data.types;
              
            }
        },
		getTimeInfo(){
			this.dateTime=until.dateHourMin(new Date());
			this.dateDay=until.formatDate(new Date())
			this.dateWeek=until.getNowWeek();
		},
		//获取报警统计
		async getWarningCount(){
			let app_id=this.app_id
			let device_id=""
			let begin_time=""
			let end_time=""
			let data=await homeapi.Smos_apiDevice_warningTime_countGet({app_id,device_id,begin_time,end_time});
			if(data.error_code==0){
				this.warningTotal=data.data;
			}
		},
		//获取在线统计
		async getAppInfo(){
			let app_id=this.app_id
			let data=await homeapi.Smos_apiAppDetailGet({app_id});
			if(data.error_code==0){
				this.appInfo=data.data;
			}
		},
		async fetchData() {
            let form=this.queryParms
            let data=await homeapi.Smos_apiAppPageGet(form);
            if(data.error_code==0){
                this.listLoading=false;
                this.projectList=data.data.list;
                this.$nextTick(()=>{
                    let app_id=until.getCookie("app_id");
                    if(app_id){
                        this.app_id=parseInt(app_id) 
                    }
                    else{
                        this.app_id=data.data.list[0].app_id;
                    }
                    this.getWarningCount();
					this.getAppInfo();
					this.getDeviceList();
					this.getDeviceCount();
                }) 
            }
        },

		async getDeviceList(){
            let form=this.queryParms;
            form.app_id=this.app_id;
            let data=await homeapi.Smos_apiDevicePageGet(form);
            if(data.error_code==0){
                this.list=data.data.list?data.data.list:[];
            }
        },
		getTime(time){
            return until.formatDateChinese(time*1000)
        },
		getDataList(dataList){
            let dataName=""
            dataList.map(res=>{
                if(dataName==""){
                    dataName=res.value_name+":"+res.value+res.value_unit
                }
                else{
                    dataName+=","+res.value_name+":"+res.value+res.value_unit
                }
            })
            return dataName
        },
		clickItem(item){
			let app_id=item.app_id
			if(app_id){
				this.app_id=parseInt(app_id) 
				until.setCookie("app_id",app_id)
			}
			this.getWarningCount();
			this.getAppInfo();
			this.getDeviceList();
			console.log(item)
		}

	}
}
</script>

<style lang="scss" scoped>
.dashboard {
	&-container {
		width: 100%;
		height: calc(100vh - 50px);
		background: #f5f5f5;
		display: flex;
		align-items: center;
		justify-content: flex-start;
		padding: 15px;
		box-sizing: border-box;
	}
	

	&-text {
		font-size: 30px;
		line-height: 46px;
	}
}
.dc_left{
	flex: 1;
	height:calc(100vh - 80px);
	background: #ffffff;
	padding: 0 30px;
	box-sizing: border-box;
}
.dcl_head{
	width: 100%;
	height: 300px;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	margin-top: 30px;
}
.dclh_left{
	flex: 1;
	height: 300px;
	border: 1px solid #e6e6e6;
}
.dclh_right{
	flex: 1;
	height: 300px;
	border: 1px solid #e6e6e6;
	margin-left: 30px;
}
.dclhl_title{
	width: 100%;
	height: 60px;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	padding-left: 15px;
	box-sizing: border-box;
	font-size: 16px;
	color: #333333;
	font-weight: bold;
	border-bottom: 1px solid #e6e6e6;
}
.dclhl_content{
	width: 100%;
	
	height:calc(100% - 60px) ;
}
.status_list{
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	margin-top: 30px;
}
.dclhlc_div{
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	font-size: 16px;
	font-weight: bold;
	line-height: 25px;
}
.dclhlc_div span:first-child{
	margin-bottom: 5px;
	font-size: 24px;
	font-weight: 400;
}
.dcl_body{
	width: 100%;
	height: calc(100vh - 480px);
	border: 1px solid #e6e6e6;
	margin-top: 30px;
}
.dc_right{
	margin-left: 15px;
	min-width: 400px;
	height:calc(100vh - 80px);
	
}
.table_content{
	max-height: calc(100vh - 550px);
	overflow: auto;
}
.dcr_head{
	width: 100%;
	height: 150px;
	background: #ffffff;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	font-size: 28px;
	font-weight: bold;
	color: #333333;
}
.dcr_head span:last-child{
	font-size: 24px;
	font-weight: 400;
	color: #666666;
	margin-top: 15px;
}
.dcr_content{
	width: 100%;
	margin-top: 15px;
	height: 600px;
	background: #ffffff;
}
.dcrc_btn{
	width: 100%;
	height: 100px;
	margin-top: 15px;
	background: #ffffff;
	padding: 15px;
	box-sizing: border-box;
}
.btn_div_main{
	width: 100%;
	height: 100%;
	background: #409EFF;
	border-radius: 5px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 24px;
	cursor: pointer;
	color: #ffffff;
}
.dcrc_title{
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 15px;
	box-sizing: border-box;
	height: 60px;
	border-bottom: 1px solid #e6e6e6;
}
.dcrct_left{
	font-size: 18px;
	color: #333333;
}
.dcrct_right{
	display: flex;
	align-items: center;
	justify-content: flex-end;
	font-size: 18px;
	color: #409EFF;
	cursor: pointer;
}
.dcrct_right span{
	margin-right: 5px;
}
.dcrct_right i{
	font-size: 26px;
	margin-top: -5px;
}
.dcrcb_div{
	width: 100%;
	height: 45px;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	padding-left: 15px;
	box-sizing: border-box;
	font-size: 18px;
	color: #000000;
}
.dcrcb_div span:first-child{
	color: #666666;
	margin-right: 8px;
}
.dcrc_body{
	margin-top: 15px;
}
.app_div{
	width: 120px;
	height: 30px;
	display: flex;
	align-items: center;
	justify-content:center;

	box-sizing: border-box;
	font-size: 16px;
	color: #333333;
	cursor: pointer;
}

.biffld_list{
       
	   display: flex;
	   align-items: center;
	   justify-content: flex-start;

	   box-sizing: border-box;
	   width: 100%;
		margin-top: 30px;
   }
   .blclass_div{
	   flex: 1;
	   min-width: 20%;
	   position: relative;
   
   }
   .blcd_title{
	   width: 100%;
	   font-size: 14px;
	   color: #333333;
	   display: flex;
	   align-items: center;
	   justify-content: flex-start;
	   line-height: 14px;
	   padding-left: 15px;
	   box-sizing: border-box;
   }
   .blcd_content{
	   width: 100%;
	   display: inline-block;
	   margin-top: 10px;
	   padding:0 15px;
	   box-sizing: border-box;
   }
   .blcdc_div{
	   display: flex;
	   align-items: center;
	   justify-content: space-between;
	   margin-top: 10px;
	   font-size: 14px;
	   color: #333333;
	   line-height: 14px;
   }
   .blcdc_div span:last-child{
	   font-size: 18px;
	   font-weight: bold;
   }
   .biffld_type{
	   width: 100%;
	   display: flex;
	   align-items: center;
	   justify-content: flex-start;
	   margin-top: 70px;
	   padding: 0 20px;
	   box-sizing: border-box;
   }
   .dclhl_content_next{
	display: flex;
	align-items: center;
	justify-content: flex-start;
   }
</style>
